<script setup>
	//
	import { ref } from 'vue'
	import ChannelSelect from './ChannelSelect.vue'
	import { Plus } from '@element-plus/icons-vue'
	import { QuillEditor } from '@vueup/vue-quill'
	import '@vueup/vue-quill/dist/vue-quill.snow.css'
	import {
		artEditService,
		artGetDetailService,
		artPublishService
	} from '@/api/article'
	import { ElMessage } from 'element-plus'
	import { baseURL } from '@/utils/request'
	import axios from 'axios'
	//

	// 抽屉表单
	const defaultForm = {
		title: '',
		cate_id: '',
		cover_img: '',
		content: '',
		state: ''
	}
	const formModel = ref({ ...defaultForm })
	const formRef = ref()
	const editorRef = ref()
	const loading = ref(false)
	const imgUrl = ref('')
	const visibleDrawer = ref(false)
	const onUploadFile = uploadFile => {
		imgUrl.value = URL.createObjectURL(uploadFile.raw)
		formModel.value.cover_img = uploadFile.raw
	}
	// 发布？
	const emit = defineEmits(['success'])
	const onPublish = async state => {
		//状态先给
		formModel.value.state = state
		// 转换formdata 存入fd
		const fd = new FormData()
		for (let key in formModel.value) {
			fd.append(key, formModel.value[key])
		}
		//判断有没有id 有就编辑
		if (formModel.value.id) {
			console.log('编辑')
			loading.value = true
			await artEditService(fd)
			ElMessage.success('修改成功')
			visibleDrawer.value = false
			emit('success', 'edit')
			loading.value = false
		} else {
			console.log('发布')
			loading.value = true
			await artPublishService(fd)
			ElMessage.success('添加成功')
			visibleDrawer.value = false
			emit('success', 'add')
			loading.value = false
		}
	}

	const open = async row => {
		//
		visibleDrawer.value = true
		console.log(row)
		if (row.id) {
			console.log('编辑回显')
			const res = await artGetDetailService(row.id)
			formModel.value = res.data.data
			imgUrl.value = baseURL + formModel.value.cover_img
			formModel.value.cover_img = await imageUrlToFile(
				imgUrl.value,
				formModel.value.cover_img
			)
		} else {
			console.log('添加功能')
			formModel.value = { ...defaultForm }
			imgUrl.value = ''
			editorRef.value.setHTML('')
		}
	}
	// axios封装对象
	async function imageUrlToFile(url, fileName) {
		try {
			// 第一步：使用axios获取网络图片数据
			const response = await axios.get(url, { responseType: 'arraybuffer' })
			const imageData = response.data

			// 第二步：将图片数据转换为Blob对象
			const blob = new Blob([imageData], {
				type: response.headers['content-type']
			})

			// 第三步：创建一个新的File对象
			const file = new File([blob], fileName, { type: blob.type })

			return file
		} catch (error) {
			console.error('将图片转换为File对象时发生错误:', error)
			throw error
		}
	}
	defineExpose({ open })
</script>
<template>
	<!-- 抽屉  :direction="rtl"-->
	<el-drawer
		:title="formModel.id ? '编辑文章' : '添加文章'"
		v-model="visibleDrawer"
		size="50%"
	>
		<el-form
			v-loading="loading"
			ref="formRef"
			:model="formModel"
			label-width="80px"
		>
			<el-form-item label="文章标题" prop="title">
				<el-input
					size="large"
					v-model="formModel.title"
					placeholder="请输入标题"
				></el-input>
			</el-form-item>
			<el-form-item label="文章分类" prop="cate_id">
				<channel-select v-model="formModel.cate_id" width="100%">
				</channel-select>
			</el-form-item>
			<el-form-item label="文章封面" prop="cover_img">
				<el-upload
					class="avatar-uploader"
					:auto-upload="false"
					:show-file-list="false"
					:on-change="onUploadFile"
				>
					<img v-if="imgUrl" :src="imgUrl" class="avatar" />
					<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
				</el-upload>
				<!--  -->
			</el-form-item>
			<el-form-item label="文章内容" prop="content">
				<div class="editor">
					<quill-editor
						ref="editorRef"
						theme="snow"
						v-model:content="formModel.content"
						content-type="html"
					></quill-editor>
				</div>
			</el-form-item>
			<el-form-item>
				<el-button @click="onPublish('已发布')" type="primary">发布</el-button>
				<el-button @click="onPublish('草稿')" type="info">草稿</el-button>
			</el-form-item>
		</el-form>
	</el-drawer>
</template>

<style lang="less" scoped>
	.avatar-uploader {
		:deep(.avatar) {
			width: 178px;
			height: 178px;
			display: block;
		}

		// 穿透子组件中的 .el-upload
		:deep(.el-upload) {
			border: 1px dashed var(--el-border-color);
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
			transition: var(--el-transition-duration-fast);
		}
		:deep(.el-upload:hover) {
			border-color: var(--el-color-primary);
		}
		:deep(.el-icon.avatar-uploader-icon) {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			text-align: center;
		}
	}
	.editor {
		width: 100%;
		:deep(.ql-editor) {
			min-height: 200px;
		}
	}
</style>
